<template>
  <div class="login">
    <mt-header title="登录">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <mt-navbar v-model="selected">
      <mt-tab-item id="1">密码登录</mt-tab-item>
      <mt-tab-item id="2">短信登录</mt-tab-item>
    </mt-navbar>
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1">
        <div class="checkuser">
          <div class="phoneEdit">
            <div class="area">
              <span>手机号</span>
            </div>
            <div class="phoneTxt">
              <input name="username" class="username" v-model="userName" type="text">
            </div>
          </div>
          <div class="phoneEdit passBox">
            <div class="area">
              <span>密码</span>
            </div>
            <input name="password" class="password" v-model="password" type="password">
          </div>
          <div class="text-center">
            <mt-button type="danger" @click="handleLoginClick">登录</mt-button>
          </div>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <div class="checkcode">
          <div class="phoneEdit fastLogin">
            <div class="area">
              <span>手机号</span>
            </div>
            <div class="phoneTxt">
              <input name="username" class="username" v-model="phone" type="text">
            </div>
          </div>
          <div class="checkCode test_number">
            <div class="area">
              <span>验证码</span>
            </div>
            <div class="checkBox01">
              <input type="text" v-model="code" placeholder="请输入验证码">
            </div>
            <div class="sendBtn">
              <button v-show="sendAuthCode" type="button" @click="sendMsg" id="send_msg">获取验证码</button>
              <span v-show="!sendAuthCode" class="auth_text"> <span class="auth_text_blue">{{timer}}</span> 秒重新发送</span>
            </div>
          </div>
          <div class="text-center">
            <mt-button type="danger" @click="handleCodeClick">登录</mt-button>
          </div>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>
    <p class="passwordFoget">
      <router-link to="/register">注册账号</router-link>
    </p>
  </div>
</template>

<script>
import axios from 'axios'
import { Toast } from 'mint-ui'
export default {
  name: 'Login',
  data () {
    return {
      selected: '1',
      loginData: '',
      userName: '',
      password: '',
      phone: '',
      sendAuthCode: true,
      timer: 0,
      code: '',
      isBtnLoading: false
    }
  },
  methods: {
    handleLoginClick () {
      if (!(/^1[3|4|5|6|7|8|9]\d{9}$/.test(this.userName))) {
        Toast('请输入正确的手机号')
        return false
      }
      if (!this.password) {
        Toast('请输入密码')
        return false
      }
      var params = new URLSearchParams()
      params.append('phone', this.userName)
      params.append('password', this.password)
      axios.post('/meimai/interface/member/login', params).then(this.handlePostInfo)
    },
    handleCodeClick () {
      if (!(/^1[3|4|5|6|7|8|9]\d{9}$/.test(this.phone))) {
        Toast('请输入正确的手机号')
        return false
      }
      if (this.code.length !== 4) {
        Toast('请输入正确的验证码')
        return false
      }
      var params = new URLSearchParams()
      params.append('phone', this.phone)
      params.append('vcode', this.code)
      axios.post('/meimai/interface/member/vcodeLogin', params).then(this.handlePostInfo)
    },
    sendMsg () {
      if (!(/^1[3|4|5|6|7|8|9]\d{9}$/.test(this.phone))) {
        Toast('请输入正确的手机号')
        return false
      }
      this.sendAuthCode = false
      this.timer = 60
      this.code = ''
      var timetimer = setInterval(() => {
        this.timer -= 1
        if (this.timer <= 0) {
          this.sendAuthCode = true
          clearInterval(timetimer)
        }
      }, 1000)
      axios.get('/meimai/interface/member/sendVcode', {
        params: {
          phone: this.phone,
          type: 2
        }
      }).then((res) => {
        if (res.data.code === 0) {
          Toast('发送验证码成功')
        } else {
          Toast(res.data.msg)
        }
      })
    },
    handlePostInfo (res) {
      res = res.data
      console.log(res)
      if (res.code === 0) {
        this.$store.commit('ADD_COUNT', res)
        this.$router.push('/')
      } else {
        Toast('您输的手机号/密码有误！\r请重新输入！')
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.mint-header
  background: #ec2935
.login >>> .mint-button--danger
  text-align: center
  width: 80%
  padding: 10px
.login >>> .mint-navbar
  background: #f8f8f8
.login >>> .mint-tab-item
  color: #888
.login >>> .mint-tab-item.is-selected
  color: #333
  border-bottom: 3px solid #ec2935
.login
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  background: #f8f8f8
  .checkuser
    margin-top: 0.65rem
    .phoneEdit
      margin-top: 0.01rem
      width: 100%
      height: 1rem
      line-height: 1rem
      background-color: white
      padding-left: 0.2rem
      border-bottom: 0.02rem solid #f8f8f8
      .area
        width: 25%
        float: left
      .phoneTxt
        width: 70%
        float: left
        .username
          width: 100%
    .text-center
      text-align: center
      padding-top: 0.3rem
  .checkcode
    margin-top: 0.65rem
  .phoneEdit
    margin-top: 0.02rem
    width: 100%
    height: 1rem
    line-height: 1rem
    background-color: white
    padding-left: 0.2rem
    border-bottom: 0.02rem solid #f8f8f8
    .area
      width: 25%
      float: left
    .phoneTxt
      width: 70%
      float: left
      .username
        width: 100%
  .checkCode
    height: 50px
    line-height: 50px
    background-color: white
    padding-left: 10px
    border-bottom: #f8f8f8
    border: none
    .area
      width: 25%
      float: left
    .checkBox01
      width: 41%
      float: left
      #check_code
        color: #888
        border: none
        &::-webkit-input-placeholder
          color: #ccc
    .sendBtn
      width: 30%
      float: left
      text-align: right
      #send_msg
        background: #FFFFFF
        border-left: 1px solid #e5e5e5
        border-bottom: none
        border-top: none
        border-right: none
        padding: 0px 8px
        color: #ec2935
  .text-center
    text-align: center
    padding-top: 0.3rem
  .passwordFoget
    text-align: center
    font-size: 0.24rem
    padding-top: 0.3rem
    a
      color: #888888
</style>
